<template>
<view class="diyi">
	<sousuo></sousuo>

	
	<view class="zhuti fl">
		<view class="zi">
			主题
		</view>
		<view class="ziti ">
			<text :class="{ bs: idall }" @tap="bis()">全部</text>
			<text v-for="(item,index) in item" :key="item.id" @tap="bian(item)"    :class="{ bs: cunid.indexOf(item.id) !== -1 }">{{item.name}}</text>
		</view>
		
	</view>
	<view class="xuanzequ" v-show="state">
		
	</view>
	<view class="paixu flex">
		<view class="left">
			<text>排序</text>
			<text v-for="(item,index) in list" :class="{yanse:ids==index}" @tap="xuan(index)">{{item.text}}</text>
		</view>
		<view class="right yanse" @tap="xuanzhuan">
		<!-- 	//点击旋转箭头,箭头样式可以切换 -->
			<view class="csss" :class="[state?'g':'a']" >
					<text   class="iconfont icon-xiajiantou"></text>
			</view>
		
			更多筛选
		</view>
	</view>
	
</view>
</template>

<script>
	import sousuo from "@/components/jiaocheng/sousuo.vue"
	import { apis } from "@/http/api.js"
	import list from "@/components/jiaocheng/liebiao.vue"
	export default{
		props:['item'],
		data(){
			return{
				mingchneg:[] ,//名称
				cunid:[], //存储选中
				idall:true,
				ids:0,
				state:false,
				list:[
					{id:0,text:'综合'},
					{id:1,text:'最新'},
					{id:2,text:'最热'},
				]
				
			}
		},
		
		
		methods:{
			
		bian(item){
			this.idall=false
			const ids=this.cunid.indexOf(item.id);
			if (ids == -1) {
			        this.cunid.push(item.id);
			      }
				  
				   else {
			        this.cunid.splice(ids, 1);
			      }
				  console.log( this.cunid);
			
		},
		bis(){
			this.idall=true
			this.cunid=[]
		},
		xuan(val){
			console.log(val);
			this.ids=val
		},
		xuanzhuan(){
			 this.state=!this.state;
			          console.log(this.state)
		}
		},
		components:{
			sousuo,
			list,
		}
	}
</script>

<style lang="scss" scoped>
	.zhuti{
		margin-top: 30rpx;
		border-bottom: 1px solid #eee;
		
		.zi{
			width: 84rpx;
			font-size: 28rpx;
			font-weight: 700;
		}
		.ziti{
			flex: 1;
			flex-wrap: wrap;
			text{
			margin: 0rpx 14rpx 16rpx;
				font-size: 28rpx;
				display: inline-block;
				color: #5b6164;
				word-wrap: break-word;
				    word-break: break-all;
			}
			.bs{
				color: #1c9fea;
			}
		}
		
	}
	.xuanzequ{
		height: 200rpx;
		border: 1px solid #000;
	}
	.paixu{
		margin-top: 20rpx;
		.left{
			text{
				margin-right: 20rpx;
				font-size: 28rpx;
			}
			text:nth-child(1){
				font-weight: 700;
			}
			
		}
		.right{
			display: flex;
			.csss{
				width: 30rpx;
				margin-right: 14rpx;
				
			
			}
		}
	}
	.yanse{
		color: #1c9fea;
	}
	//旋转
	 .a{
	        transition: all .5s;
	    }
	    .g{
			
	        transform:rotate(180deg);
	        transition: all .5s;
	    }

</style>